<template>
	<progressDemo :percent="count" :height="50" inactiveColor="pink"></progressDemo>
	
	<view style="display: flex;gap: 20rpx;margin-top: 20rpx;">
		<progressDemo activeColor="green" :percent="count" :direction="true" :height="25"></progressDemo>
		<progressDemo :percent="count" :height="25"></progressDemo>
	</view>
	<view style="display: flex;gap: 20rpx;margin-top: 40rpx;">
		<view style="height: 100rpx;width: 100rpx;border-radius: 50%;border: 1rpx solid red;line-height: 100rpx;text-align: center;" @click="add">增加</view>
		<view style="height: 100rpx;width: 100rpx;border-radius: 50%;border: 1rpx solid red;line-height: 100rpx;text-align: center;" @click="reduce">减少</view>
	</view>
</template>

<script setup>
import progressDemo from './component/index'
import { ref } from 'vue'
const count = ref(0);
const add = () => {
	count.value = count.value+1;
}
const reduce = () => {
	count.value = count.value-1;
}
</script>

<style>
</style>